{extend name="category" /}

{block name="content"}
<!-- 页面头部 -->
<div class="page-header">
    <div class="container">
        <h1 data-aos="fade-up">标签：#{$tag.name ?: '标签'}</h1>
        <p data-aos="fade-up" data-aos-delay="100">{$tag.description ?: '查看该标签下的所有文章'}</p>
        <nav aria-label="breadcrumb" data-aos="fade-up" data-aos-delay="200">
            <ol class="breadcrumb breadcrumb-custom">
                <li class="breadcrumb-item"><a href="/">首页</a></li>
                <li class="breadcrumb-item"><a href="/articles.html">新闻动态</a></li>
                <li class="breadcrumb-item active" aria-current="page">{$tag.name ?: '标签'}</li>
            </ol>
        </nav>
    </div>
</div>

<div class="container">
    <div class="row">
        <!-- 文章列表 -->
        <div class="col-lg-8">
            <div class="article-list">
                {volist name="articles" id="article"}
                <article class="article-card" data-aos="fade-up">
                    <div class="row g-0">
                        <div class="col-md-5">
                            <img src="{$article.cover_image ?: '/assets/images/placeholder/article-purple.svg'}" alt="{$article.title}" class="article-image">
                        </div>
                        <div class="col-md-7">
                            <div class="article-content">
                                <div class="article-meta">
                                    <span><i class="bi bi-calendar"></i> {$article.create_time|date='Y-m-d'}</span>
                                    <span><i class="bi bi-person"></i> {$article.user.username ?: '管理员'}</span>
                                    <span><i class="bi bi-eye"></i> {$article.view_count ?: 0}</span>
                                </div>
                                <h3><a href="/article/{$article.id}.html">{$article.title}</a></h3>
                                <p class="article-summary">{$article.summary ?: mb_substr($article.content, 0, 150, 'utf-8')}...</p>
                                {if condition="$article.tags"}
                                <div class="article-tags">
                                    {volist name="article.tags" id="t"}
                                    <a href="/tag/{$t.id}.html" class="article-tag">{$t.name}</a>
                                    {/volist}
                                </div>
                                {/if}
                                <a href="/article/{$article.id}.html" class="read-more">
                                    阅读全文 <i class="bi bi-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </article>
                {/volist}

                {empty name="articles"}
                <div class="text-center py-5" data-aos="fade-up">
                    <i class="bi bi-inbox" style="font-size: 4rem; color: #cbd5e1;"></i>
                    <p class="mt-3 text-secondary">该标签下暂无文章</p>
                </div>
                {/empty}
            </div>
        </div>

        <!-- 侧边栏 -->
        <div class="col-lg-4">
            <!-- 标签信息 -->
            <div class="sidebar-card" data-aos="fade-up">
                <h4>标签信息</h4>
                <p class="text-secondary">{$tag.description ?: '暂无描述'}</p>
                <div class="mt-3">
                    <span class="text-secondary">文章数：</span>
                    <strong>{$tag.article_count ?: 0}</strong>
                </div>
            </div>

            <!-- 分类 -->
            <div class="sidebar-card" data-aos="fade-up" data-aos-delay="100">
                <h4>文章分类</h4>
                <ul class="category-list">
                    {volist name="categories" id="category"}
                    <li>
                        <a href="/category/{$category.id}.html">
                            <span>{$category.name}</span>
                            <span class="category-count">{$category.article_count ?: 0}</span>
                        </a>
                    </li>
                    {/volist}

                    {empty name="categories"}
                    <li class="text-secondary">暂无分类</li>
                    {/empty}
                </ul>
            </div>

            <!-- 相关标签 -->
            <div class="sidebar-card" data-aos="fade-up" data-aos-delay="200">
                <h4>相关标签</h4>
                <div class="tag-cloud">
                    {volist name="tags" id="t"}
                    <a href="/tag/{$t.id}.html" {if condition="$t.id == $tag.id"}style="background: #667eea; color: #fff;"{/if}>
                        {$t.name}
                    </a>
                    {/volist}

                    {empty name="tags"}
                    <p class="text-secondary mb-0">暂无标签</p>
                    {/empty}
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
